<template>
  <div>
    <el-card shadow="hover">
      <el-table :data="skuList.records" style="margin: 20px 0" border>
        <el-table-column
          type="index"
          label="序号"
          width="80px"
          align="center"
        />
        <el-table-column prop="skuName" label="名称" />
        <el-table-column prop="skuDesc" label="描述" />
        <el-table-column label="默认图片" width="160px">
          <template #="{ row, $index }">
            <img
              :src="row.skuDefaultImg"
              alt=""
              style="width: 100px; height: 100px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="weight" label="重量(千克)" />
        <el-table-column prop="price" label="价格(元)" />
        <el-table-column label="操作">
          <template #="{ row, $index }">
            <el-button
              :type="row.isSale == 0 ? 'warning' : 'success'"
              :icon="row.isSale == 0 ? Bottom : Top"
              size="small"
              v-hidden="'btn.Sku.updown'"
              @click="onOrCancelSale(row)"
            ></el-button>
            <el-button
              type="primary"
              :icon="Edit"
              size="small"
              @click="editSku"
            ></el-button>
            <el-button
              type="info"
              :icon="InfoFilled"
              size="small"
              @click="showSkuData(row)"
              v-hidden="'btn.Sku.detail'"
            ></el-button>
            <el-button
              type="danger"
              :icon="Delete"
              size="small"
              @click="deleteSku(row)"
              v-hidden="'btn.Sku.remove'"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        v-model:currentPage="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        background
        layout="prev, pager, next, jumper, ->, sizes, total"
        :total="skuList.total"
        @size-change="handleSizeChange"
        @current-change="getSkuList"
      />

      <!-- 抽屉 -->
      <el-drawer v-model="drawer" size="50%" :showClose="false">
        <el-row>
          <el-col :span="6"><div class="name">名称:</div></el-col>
          <el-col :span="18"
            ><div class="nameInfo">{{ skuData.skuName }}</div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="6"><div class="describe">描述:</div></el-col>
          <el-col :span="18"
            ><div class="describeInfo">{{ skuData.skuDesc }}</div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="6"><div class="price">价格:</div></el-col>
          <el-col :span="18"
            ><div class="priceInfo">{{ skuData.price }}</div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="6"><div class="flatAttr">平台属性:</div></el-col>
          <el-col :span="18"
            ><div class="flatAttrInfo">
              <el-tag
                style="margin: 0 5px"
                type="success"
                v-for="(attr, index) in skuData.skuAttrValueList"
                :key="attr.id"
                >{{ attr.attrName }}-{{ attr.valueName }}</el-tag
              >
            </div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="6"><div class="saleAttr">销售属性:</div></el-col>
          <el-col :span="18"
            ><div class="saleAttrInfo">
              <el-tag
                style="margin: 0 5px"
                type="success"
                v-for="(saleAttr, index) in skuData.skuSaleAttrValueList"
                :key="saleAttr.id"
                >{{ saleAttr.saleAttrName }}-{{
                  saleAttr.saleAttrValueName
                }}</el-tag
              >
            </div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="6"><div class="shopImage">商品图片:</div></el-col>
          <el-col :span="18"
            ><div class="shopImageInfo">
              <el-carousel height="400px" style="width: 400px">
                <el-carousel-item
                  v-for="(image, index) in skuData.skuImageList"
                  :key="image.id"
                >
                  <img
                    :src="image.imgUrl"
                    alt=""
                    style="width: 400px; height: 400px"
                  />
                </el-carousel-item>
              </el-carousel></div
          ></el-col>
        </el-row>
      </el-drawer>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { Delete, Edit, InfoFilled, Top, Bottom } from "@element-plus/icons-vue"; // 引入icon图标
import { ElMessage } from "element-plus";

import {
  reqSkuList,
  reqOnSale,
  reqCancelSale,
  reqSkuData,
  reqDeleteSku,
} from "@/api/product/sku"; // 请求函数
import type { ISkuList, ISku } from "@/api/product/sku/model"; // 数据类型

const currentPage = ref<number>(1); // 当前页码
const pageSize = ref<number>(10); // 每页显示条数
const drawer = ref<boolean>(false); // 抽屉的状态
const skuList = ref<ISkuList>({
  records: [],
  total: 0,
}); // sku数据列表
const skuData = ref<ISku>({
  category3Id: undefined,
  createTime: "",
  id: undefined,
  isSale: 0,
  price: 0,
  skuAttrValueList: null,
  skuDefaultImg: "",
  skuDesc: "",
  skuImageList: null,
  skuName: "",
  skuSaleAttrValueList: null,
  spuId: undefined,
  tmId: undefined,
  weight: "",
}); // sku数据

// 获取SKU列表 及 改变当前页码时再次获取数据
const getSkuList = async (page: number = 1) => {
  currentPage.value = page;
  const result = await reqSkuList(currentPage.value, pageSize.value);
  skuList.value.records = result.records;
  skuList.value.total = result.total;
};

// 修改每页条数是获取数据列表
const handleSizeChange = (limit: number) => {
  pageSize.value = limit;
  getSkuList();
};

// 上下架按钮的回调
const onOrCancelSale = async (row: ISku) => {
  if (row.isSale == 0) {
    await reqOnSale(row.id);
  } else {
    await reqCancelSale(row.id);
  }
};

// 修改按钮的回调
const editSku = () => {
  ElMessage({
    type: "warning",
    message: "正在开发中...",
  });
};

// sku详细信息按钮的回调
const showSkuData = async (row: ISku) => {
  drawer.value = true;
  const result = await reqSkuData(row.id);
  console.log(result);
  skuData.value = result;
};

// 删除sku
const deleteSku = async (row: ISku) => {
  try {
    await reqDeleteSku(row.id);
    ElMessage({
      type: "success",
      message: "删除成功",
    });
    getSkuList(currentPage.value);
  } catch (error) {
    ElMessage({
      type: "error",
      message: "删除失败",
    });
  }
};

onMounted(() => {
  getSkuList();
});
</script>

<style scoped>
::v-deep .el-carousel__button {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  background-color: yellowgreen;
}
.name,
.describe,
.price,
.flatAttr,
.saleAttr,
.shopImage {
  text-align: right;
  margin: 0 10px;
  font-size: 20px;
  line-height: 20px;
  padding: 10px 0;
}
.nameInfo,
.describeInfo,
.priceInfo,
.flatAttrInfo,
.saleAttrInfo,
.shopImageInfo {
  line-height: 20px;
  padding: 10px 50px 10px 0;
}

.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
